// 加载文章内容
function loadArticles() {
    const articleGrid = $('.article-grid');
    articleGrid.empty();

    articles.forEach(article => {
        const articleHtml = `
            <article class="article-card" data-category="${article.category}" data-subcategory="${article.subcategory}">
                <div class="article-image">
                    <i class="fab ${article.icon}"></i>
                </div>
                <div class="article-content">
                    <h3>${article.title}</h3>
                    <p>${article.preview}</p>
                    <div class="code-preview">
                        <pre><code class="language-${article.category === 'html-css' ? 'css' : 'javascript'}">${article.codeExample}</code></pre>
                    </div>
                    <div class="article-meta">
                        <span class="category-tag">${article.category}</span>
                        <span class="subcategory-tag">${article.subcategory}</span>
                    </div>
                </div>
            </article>
        `;
        articleGrid.append(articleHtml);
    });

    // 代码高亮
    Prism.highlightAll();

    // 添加文章卡片动画
    $('.article-card').each(function (i) {
        $(this).css({
            'animation-delay': `${i * 0.1}s`
        });
    });
}

$(document).ready(function () {
    // 加载文章
    loadArticles();    // 导航菜单动画

    // 文章过滤功能
    $('.dropdown-content a').click(function (e) {
        e.preventDefault();
        const category = $(this).data('category');
        const subcategory = $(this).data('subcategory');

        // 更新导航状态
        $('.nav-links a').removeClass('active');
        $(this).closest('.dropdown').find('.dropdown-trigger').addClass('active');

        // 过滤文章
        const $articles = $('.article-card');
        $articles.hide();
        if (subcategory) {
            $articles.filter(`[data-category="${category}"][data-subcategory="${subcategory}"]`).fadeIn();
        } else {
            $articles.filter(`[data-category="${category}"]`).fadeIn();
        }

        // 滚动到文章区域
        $('html, body').animate({
            scrollTop: $('#featured').offset().top - 100
        }, 800);
    });

    // 导航栏滚动效果
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            $('.header').addClass('scrolled');
        } else {
            $('.header').removeClass('scrolled');
        }
    });

    // 平滑滚动
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        const target = $(this.hash);
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 70
            }, 1000);
        }
    });

    // 导航栏激活状态
    const sections = $('section');
    const navLinks = $('.nav-links a');

    $(window).scroll(function () {
        let current = '';
        sections.each(function () {
            const sectionTop = $(this).offset().top;
            if ($(window).scrollTop() >= sectionTop - 100) {
                current = $(this).attr('id');
            }
        });

        navLinks.removeClass('active');
        $(`.nav-links a[href="#${current}"]`).addClass('active');
    });

    // 文章卡片悬停效果
    $('.article-card').hover(
        function () {
            $(this).find('.article-image i').addClass('fa-spin');
        },
        function () {
            $(this).find('.article-image i').removeClass('fa-spin');
        }
    );

    // 页面加载动画
    setTimeout(function () {
        $('.hero').addClass('loaded');
    }, 500);

    // 文章过滤功能
    $('.nav-links a').on('click', function () {
        const category = $(this).attr('href').replace('#', '');
        if (category === 'home') {
            $('.article-card').show();
        } else {
            $('.article-card').hide();
            $(`.article-card[data-category="${category}"]`).show();
        }
    });
});
